<template>
  <div id="echarts" class="echarts"></div>
</template>

<script setup>
import {onMounted} from "vue";
import request from '@/utils/request'
import * as echarts from '@/assets/js/echarts.min'

const init = async () => {
  const echart = echarts.init(document.getElementById("echarts"))
  let option = {
    title: {
      text: '各站点客流量统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/><strong>{b}</strong> 站： {c}'
    },
    series: [
      {
        name: '总客流量',
        type: 'pie',
        radius: [20, 140],
        center: ['25%', '50%'],
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          }
        },
        data: []
      },
      {
        name: '今日客流量',
        type: 'pie',
        radius: [20, 140],
        center: ['75%', '50%'],
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          }
        },
        data: []
      }
    ]
  };
  // 请求 -- 查询总客流量
  const {content: totalFlow} = await request.get('/member/admin/flow/total')
  // 请求 -- 查询今日客流量
  const {content: todayFlow} = await request.get('/member/admin/flow/today')
  totalFlow.forEach(item => {
    option.series[0].data.push({name: item.station, value: item.flow})
  })
  todayFlow.forEach(item => {
    option.series[1].data.push({name: item.station, value: item.flow})
  })
  echart.setOption(option)
}

onMounted(() => {
  init()
})
</script>

<style>
.echarts {
  width: 100%;
  height: 500px;
  margin: 50px 0;
}
</style>
